<template>
  <el-dialog
    :title="dialogObj.title"
    append-to-body
    :visible.sync="dialogObj.show"
    :close-on-click-modal="false"
    width="700px"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="140px"
      :rules="rules"
      :disabled="dialogObj.read"
      v-if="dialogObj.show"
      status-icon
    >
      <el-form-item label="案件名称：" prop="caseId">
        <el-select
          v-model="form.caseId"
          placeholder="请选择"
          style="width:200px;"
          size="mini"
          @change="caseNameSelect"
          :disabled="dialogObj.title === '编辑工作计划' ? true : false"
        >
          <el-option
            v-for="(data, index) in caseNameList"
            :key="index"
            :label="data.title"
            :value="data.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户：" prop="customerName">
        <el-input
          style="width:200px;"
          size="mini"
          :value="customerName"
          disabled
        ></el-input>
        <div style="color:red;font-size:12px">
          {{ customerAddress }}
        </div>
      </el-form-item>
      <el-form-item label="计划开始时间：" prop="planStartTime">
        <el-date-picker
          v-model="form.planStartTime"
          type="date"
          size="mini"
          maxlength="50"
          style="width:200px"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="计划结束时间：" prop="planEndTime">
        <el-date-picker
          v-model="form.planEndTime"
          type="date"
          size="mini"
          maxlength="50"
          style="width:200px"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="实际开始时间：" prop="actualStartTime">
        <el-date-picker
          v-model="form.actualStartTime"
          type="date"
          size="mini"
          maxlength="50"
          style="width:200px"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="实际结束时间：" prop="actualEndTime">
        <el-date-picker
          v-model="form.actualEndTime"
          type="date"
          size="mini"
          maxlength="50"
          style="width:200px"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="评分：" prop="score">
       <el-rate
        v-model="form.score"
        show-text>
      </el-rate>
      </el-form-item> -->
      <el-form-item label="完成状态：" prop="status">
        <el-select
          v-model="form.status"
          placeholder="请选择"
          style="width:200px;"
          size="mini"
          @change="handleStatus"
        >
          <el-option
            v-for="(data, index) in planWorkStatus"
            :key="index"
            :label="data.value"
            :value="data.id"
            :disabled="data.id === '3' ? true : false"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="接收人：" prop="nextUid" v-if="isShowNextSysuser">
        <el-select
          v-model="form.nextUid"
          placeholder="请选择"
          style="width:200px;"
          size="mini"
        >
          <el-option
            v-for="(data, index) in sysUserList"
            :key="index"
            :label="data.userName"
            :value="data.userId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="驳回理由：" prop="reason" v-if="form.reason !== ''">
        <el-input
          v-model="form.reason"
          style="width:400px;"
          size="mini"
          type="textarea"
          maxlength="100"
          disabled
          placeholder="驳回理由"
        ></el-input>
      </el-form-item>
      <el-form-item label="优先级：" prop="priority">
        <el-select
          v-model="form.priority"
          placeholder="请选择"
          style="width:200px;"
          size="mini"
        >
          <el-option
            v-for="(data, index) in planWorkPriority"
            :key="index"
            :label="data.value"
            :value="data.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input
          v-model="form.remark"
          style="width:400px;"
          size="mini"
          type="textarea"
          maxlength="100"
          placeholder="备注"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="sub" size="mini">确 定</el-button>
      <el-button @click="dialogObj.show = false" size="mini">取 消</el-button> 
    </span>
  </el-dialog>
</template>
<script>
import { _debounce } from "@u/debounce";
import {
  getSysuserSelectApi,
  getAddPlanWorkListURLApi,
  getModifyPlanWorkListURLApi,
  workCaseListURLApi,
  getCaseNameWorkListURLApi,
} from "@s/api";
import { validateTemplate } from "@u/validate";
import { PLANWORKSTATUS, PLANWORKPRIORITY } from "@u/wordbook";
export default {
  name: "dialogCom",
  props: ["dialogObj"],
  data() {
    return {
      form: {
        id: undefined,
        caseId: "",
        planStartTime: "",
        planEndTime: "",
        actualStartTime: "",
        actualEndTime: "",
        remark: "",
        reason: "",
        score: undefined,
        status: "",
        priority: "",
        nextUid: ""
      },
      caseNameList: [],
      isShowNextSysuser: false,
      planWorkStatus: PLANWORKSTATUS,
      sysUserList: [],
      planWorkPriority: PLANWORKPRIORITY,
      agentList: [],
      customerName: "",
      customerAddress: "",
      rules: {
        caseId: [
          { required: true, trigger: "blur", message: "请输入案件名称" },
          { validator: validateTemplate },
        ],
        status: [
          { required: true, trigger: "blur", message: "请选择完成状态" },
          { validator: validateTemplate },
        ],
         nextUid: [
          { required: true, trigger: "blur", message: "请选择流程管理员" },
          { validator: validateTemplate },
        ],
        priority: [
          { required: true, trigger: "blur", message: "请选择优先级" },
          { validator: validateTemplate },
        ],
        planStartTime: [
          { required: true, message: "请选择开始时间", trigger: "blur" },
          { validator: validateTemplate },
        ],
        planEndTime: [
          { required: true, message: "请选择结束时间", trigger: "blur" },
          { validator: validateTemplate },
        ],
      },
    };
  },
  mounted() {
    this.getworkCaseListURLSelect();
  },
  methods: {
    getSysuserSelect() {
      getSysuserSelectApi({ name: "流程" }).then((res) => {
        this.sysUserList = res;
      });
    },
    getworkCaseListURLSelect() {
      workCaseListURLApi({ isExcluded: 1 }).then((res) => {
        res.map(i => console.log(i.id))
        console.log(res, 'sss')
        this.caseNameList = res;
      });
    },
    handleStatus(val) {
      if (val === "2") {
        this.isShowNextSysuser = true;
      } else {
        this.isShowNextSysuser = false;
      }
    },
    initDialog() {
      if (this.dialogObj.id) {
        this.form.id = this.dialogObj.id;
        this.form.caseId = this.dialogObj.form.caseId;
        this.form.planStartTime = this.dialogObj.form.planStartTime;
        this.form.actualStartTime = this.dialogObj.form.actualStartTime;
        this.form.planEndTime = this.dialogObj.form.planEndTime;
        this.form.actualEndTime = this.dialogObj.form.actualEndTime;
        this.form.remark = this.dialogObj.form.remark;
        this.form.score = this.dialogObj.form.score;
        this.form.reason = this.dialogObj.form.reason;
        this.form.status = this.dialogObj.form.status;
        this.form.priority = this.dialogObj.form.priority;
        this.customerName = this.dialogObj.form.customerName;
        this.customerAddress = this.dialogObj.form.customerAddress;
        this.form.nextUid = this.dialogObj.form.currentProcessUid;
        this.form.status === "2" ? this.isShowNextSysuser = true : this.isShowNextSysuser = false
        this.caseNameSelect(this.dialogObj.form.caseId)
      } else {
        this.form.caseId = "";
        this.form.planStartTime = "";
        this.form.actualStartTime = "";
        this.form.actualEndTime = "";
        this.form.planEndTime = "";
        this.form.remark = "";
        this.form.score = "";
        this.form.reason = "";
        this.form.status = "";
        this.form.priority = "";
        this.form.nextUid = "";
        this.isShowNextSysuser = false;
        this.customerName = "";
        this.customerAddress = "";
      }
    },
    sub: _debounce(function() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.dialogObj.id) {
            this.updateSub();
          } else {
            this.addSub();
          }
        }
      });
    }),
    caseNameSelect(val) {
      getCaseNameWorkListURLApi(val).then((res) => {
        this.customerName = res.customerName;
        this.customerAddress = res.customerAddress;
      });
    },

    updateSub() {
      let json = JSON.parse(JSON.stringify(this.form));
      getModifyPlanWorkListURLApi(json).then(() => {
        this.dialogObj.show = false;
        this.$emit("reflash");
        this.$message({
          type: "success",
          message: "修改成功！",
        });
      });
    },
    addSub() {
      let json = JSON.parse(JSON.stringify(this.form));
      getAddPlanWorkListURLApi(json).then(() => {
        this.dialogObj.show = false;
        this.$emit("reflash");
        this.$message({
          type: "success",
          message: "添加成功！",
        });
      });
    },
  },
  watch: {
    "dialogObj.show"(val) {
      if (val) {
        this.getSysuserSelect();
        this.getworkCaseListURLSelect();
        this.initDialog();
      }
    },
  },
};
</script>
<style scoped lang="scss">
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  color: #409eff !important;
  font-weight: 700 !important;
}
.el-rate {
  padding-top: 10px;
}
</style>
